<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>

    <script type="text/javascript">
        $(function(){
            const app = {
                data(){
                    return{
                        isActive: false,
                        hasError: true
                    }
                }
            }
            Vue.createApp(app).mount('#app')

            const app2 = {
                data() {
                  return {
                     classObject: {
                        'active': false,
                        'text-danger': true
                     }
                  }
               }
            }
            Vue.createApp(app2).mount('#app2')

            const app3 = {
               data() {
                  return {
                     isActive: true,
                     error: null
                  }
               },
               computed: {
                  classObject() {
                     return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                     }
                  }
               }
            }
            Vue.createApp(app3).mount('#app3')

            const app4 = {
                data() {
                    return {
                        isActive: false,
                        activeClass: 'active',
                        errorClass: 'text-danger'
                    }
                }
            }
            Vue.createApp(app4).mount('#app4')

            const app5 = {
                data() {
                    return {
                        activeColor: 'red',
                        fontSize: 30
                    }
                }
            }
            Vue.createApp(app5).mount('#app5')

            const app6 = {
                data() {
                    return {
                        styleObject: {
                            color: "red",
                            fontSize: "30px"
                        }
                    }
                }
            }
            Vue.createApp(app6).mount('#app6')

            const app7 = {
                data() {
                    return {
                        baseStyles: {
                            color: 'green',
                            fontSize: '30px'
                        },
                        overridingStyles: {
                            'font-weight': 'bold'
                        }
                    }
                }
            }
            Vue.createApp(app7).mount('#app7')

            const app8 = Vue.createApp({})
            app8.component('custom', {
                template: '<h1 class="classA classB">I like runoob!</h1>'
            })
            app8.mount('#app8')

            const app9 = Vue.createApp({})
            app9.component('custom', {
              template: `
                <p :class="$attrs.class">I like runoob!</p>
                <span>这是一个子组件</span>
              `
            })
            app9.mount('#app9')
        })
    </script>
    <style>
    .static {
    width: 100px;
    height: 100px;
    }
    .active {
        background: green;
    }
    .text-danger {
        background: red;
    }
    .classA {
        color: red;
        font-size:30px;
    }
    </style>
</head>
<body>
<div id="app">
    <div class="static" :class="{ 'active': isActive, 'text-danger': hasError }">第一</div>
</div>
<br>
<div id="app2">
    <div class="static" :class="classObject">第二</div>
</div>
<br>
<div id="app3">
    <div class="static" :class="classObject">第三</div>
</div>
<br>
<div id="app4">
    <div class="static" :class="[isActive ? activeClass : errorClass]">第四</div>
</div>
<br>
<div id="app5">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<br>
<div id="app6">
    <div :style="styleObject">菜鸟教程</div>
</div>
<br>
<div id="app7">
    <div :style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
<div id="app8">
    <custom class="classC classD"></custom>
</div>
<br>
<div id="app9">
    <custom class="classA"></custom>
</div>
</body>
</html>